<script setup>
import { useRouter } from 'vue-router'
import { enumStore } from '@/store/enum'
import { storeToRefs } from 'pinia'
import Utility from '@/utils/utility'
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
const router = useRouter()
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})

// 重新提交
function hanldeAgain() {
  router.push(`/contract/connection/${props.info.inSerialNo}?type=again`)
}
// 关联合同订单
function hanldeRelation() {
  router.push(`/contract/connection/${props.info.inSerialNo}`)
}
</script>

<template>
  <div
    class="pending-item"
    @click="router.push(`/trade/enter/${props.info.inSerialNo}`)"
  >
    <div class="base-info">
      <p class="entry-name">{{ props.info.payerName }}</p>
      <p class="entry-currency">
        {{ $filters.formatMoney(props.info.payeeAmount) }}
        <span class="currency-name">
          {{ props.info.payeeCurrency }}
          {{
            Utility.getLabelByValue(
              enumDslInfo.CurrencyType,
              info.payeeCurrency
            )
          }}</span
        >
      </p>
    </div>
    <div class="pending-item-row fz-12">收款账号：{{ props.info.vaNo }}</div>
    <div class="pending-item-row fz-12">
      {{ props.info.gmtCreate }}
      <!-- 入账审核所关联的合同订单有被驳回的，则展示“有合同订单被驳回” -->
      <template v-if="props.info.auditStatus === 'Returned'">
        <i class="iconfont icon-gantanhaoicon"></i>
        <span>有合同订单被驳回</span>
      </template>
    </div>
    <div
      v-if="
        props.info.auditStatus === 'Initial' ||
        props.info.auditStatus === 'Returned'
      "
      class="pending-item-btn"
    >
      <button
        v-if="props.info.auditStatus === 'Returned'"
        class="fz-12"
        @click.stop="hanldeAgain"
      >
        重新提交
      </button>
      <button
        v-if="props.info.auditStatus === 'Initial'"
        class="fz-12"
        @click.stop="hanldeRelation"
      >
        关联合同订单
      </button>
    </div>
    <div
      class="pending-item-status fz-12 spend-color"
      :style="{
        color:
          props.info.auditStatus === 'Refunded' ||
          props.info.auditStatus === 'Rejected'
            ? '#F41D1D'
            : props.info.auditStatus === 'Approved'
            ? '#999999'
            : '#FAA64E',
      }"
    >
      <i
        v-if="
          props.info.auditStatus === 'Refunded' ||
          props.info.auditStatus === 'Rejected'
        "
        class="iconfont icon-gantanhaoicon"
      ></i>
      {{
        Utility.getLabelByValue(
          enumDslInfo.IncomingAuditStatus,
          info.auditStatus
        )
      }}
      <!-- Refunded  RefundedWithRefuseEntry  已退款 -->
      <!-- UnRefundedWithRefuseEntry   Rejected   未退款 -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.pending-item {
  background: #fff;
  padding: 0.1rem 0.12rem 0;
  margin-top: 0.1rem;
  border-radius: 0.08rem;
  position: relative;

  .base-info {
    color: #222;
    .entry-name {
      font-size: 0.16rem;
      font-weight: 500;
    }
    .entry-currency {
      font-size: 0.18rem;
      margin-bottom: 0.08rem;
      font-weight: bold;
      .currency-name {
        font-size: 0.14rem;
      }
    }
  }

  &-row {
    @include fh;
    color: #999;
    margin-bottom: 0.04rem;
    i {
      margin-left: auto;
      color: #f41d1d;
    }
    span {
      color: #f41d1d;
    }
  }

  &-btn {
    @include fh;
    height: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.1rem;
    border-top: 1px solid #eee;

    button {
      padding: 0.05rem 0.12rem;
      border: 1px solid #ccc;
      background: #fff;
      border-radius: 0.14rem;
      margin-left: 0.1rem;
    }
  }

  &-status {
    @include fh;
    position: absolute;
    right: 0.12rem;
    top: 0.4rem;
    color: #faa64e;

    i {
      margin-right: 0.04rem;
    }
  }
  .spend-color {
    margin-top: 0.25rem;
  }
}
</style>
